<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>核心练习题</title>
    <style>
        /* 先清除标签的默认元样式 */
        * {
            padding: 0;
            margin: 0;
        }


        .版心居中 {
            width: 600px; /* 盒子宽度 */
            margin: 0 auto; /* 版心居中 */

            display: flex; /* flex布局 */
            flex-wrap: wrap; /* flex布局, 可以换行显示 */
        }
        
        .版心居中 img{
            height: 100px; /* 图片宽高 */
            width: 100px;
            
            margin: 2px; /* 外边距, 图片可以拉开距离 */

            border: 2px solid #258DF2; /* 边框线设置 */
            border-radius: 10px 0 10px 0; /* 边框线, 圆角属性 */
        }

    </style>
</head>
<body>
<!--
核心练习题
需求：
根据用户输入的个数，页面可以渲染对应王者荣耀永雄的个数
-->

<!--思路: 下面的代码, 转成JS实现-->
<!--<div class="版心居中">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--    <img src="./核心练习作业素材/1.webp" alt="">-->
<!--</div>-->



<!--JS实现-->
<script>
    // 定义一个数组,存储图片信息
    let 图片地址 = [
        "./核心练习作业素材/1.webp",
        "./核心练习作业素材/2.webp",
        "./核心练习作业素材/3.webp",
        "./核心练习作业素材/4.webp",
        "./核心练习作业素材/5.webp",
        "./核心练习作业素材/6.webp",
        "./核心练习作业素材/7.webp",
        "./核心练习作业素材/8.webp",
        "./核心练习作业素材/9.webp",
        "./核心练习作业素材/10.webp",
        "./核心练习作业素材/11.webp",
        "./核心练习作业素材/12.webp",
        "./核心练习作业素材/13.webp",
        "./核心练习作业素材/14.webp",
        "./核心练习作业素材/15.webp",
        "./核心练习作业素材/16.webp",
        "./核心练习作业素材/17.webp",
        "./核心练习作业素材/18.webp",
        "./核心练习作业素材/19.webp",
        "./核心练习作业素材/20.webp"
    ]
    // 根据输入的数字渲染图片
    let  数字 = prompt('输入1-20的数字:') //在弹窗里输入数字, 前面加 + 号 是转换成数字类型

    if (数字 >= 1 && 数字 <= 20) { // 判断数字是否符合要求
         // div是大盒子, 不在循环里
        document.write('<div class="版心居中">')
        for (let i = 0; i < 数字; i++) {
            document.write(`<img src="${图片地址[i]}" alt="">`) // 图片通过循环打印
        }
        document.write('</div>') // 标签的结尾,不要忘了
    }
    else { // 如果数字不对, 给出提示
        alert('请输入正确的数字')
    }
</script>
</body>
</html>